<template>
  <el-dialog
    class="device-dislog-box"
    v-model="deviceDialogVisible"
    title="设备管理"
    width="700px"
    :before-close="onCloseFunc"
  >
    <div class="top-box flex ac jb">
      <el-form inline :model="deviceFormInline">
        <el-form-item label="">
          <el-input
            v-model="deviceFormInline.user"
            placeholder="请输入设备编码"
            clearable
            class="device-input-box"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" classdevice-btn>查询</el-button>
        </el-form-item>
      </el-form>
      <el-button type="primary" class="xf-btn" @click="xfDialogVisible = true">
        设备下发
      </el-button>
    </div>
    <div class="table-box">
      <el-table
        :data="tableData"
        height="400px"
        stripe
        :header-cell-style="{
          color: '#828A9D',
          textAlign: 'center',
          height: '60px',
        }"
        :cell-style="{ textAlign: 'center', color: '#1B2431' }"
      >
        <el-table-column prop="date" label="设备编码">
          <template #default="scope">
            <p>
              <span class="green round-box"></span>
              JIG7E10000467
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="店铺名称" />
        <el-table-column prop="zip" label="操作" width="200px">
          <template #default="scope">
            <el-button type="primary" link>详情</el-button>
            <el-button type="primary" link>回收设备</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
  <!-- 设备下发 -->
  <el-dialog
    v-model="xfDialogVisible"
    title="设备下发"
    width="500px"
    class="xf-device-box"
    :before-close="onXfCloseFunc"
  >
    <el-form :model="xfForm" label-width="auto" :rules="xfRules">
      <el-form-item label="设备编码" prop="name">
        <el-input
          :rows="5"
          resize="none"
          class="text-box"
          v-model="xfForm.name"
          type="textarea"
          placeholder="输入设备编码，并以英文逗号分开"
        />
      </el-form-item>
      <el-form-item label="备注">
        <el-input class="input-box" v-model="xfForm.name" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          class="submit-btn"
          type="primary"
          @click="xfDialogVisible = false"
        >
          设备下发
        </el-button>
        <el-button class="cancel-btn" @click="xfDialogVisible = false">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import {
  computed,
  watch,
  onMounted,
  getCurrentInstance,
  ref,
  defineEmits,
  nextTick,
} from 'vue'
const { proxy: that } = getCurrentInstance()
const props = defineProps({
  show: {
    type: Boolean,
    default: () => {
      return false
    },
  },
})
let deviceFormInline = ref({})
let deviceDialogVisible = ref(false)
let tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
// 设备下发
let xfDialogVisible = ref(false)
let xfForm = ref({})
let xfRules = ref({
  name: [{ required: true, message: '请输入', trigger: 'change' }],
})
const onXfCloseFunc = () => {
  xfDialogVisible.value = false
}
watch(
  () => props.show,
  (newValue, oldValue) => {
    deviceDialogVisible.value = props.show
  }
)
const emit = defineEmits(['onClose'])
const onCloseFunc = () => {
  emit('onClose', false)
}
</script>
<style lang="scss">
.device-dislog-box {
  border-radius: 8px;
  .el-dialog__header {
    border-bottom: 1px solid #dde2ee;
    margin: 0;
  }
  .top-box {
    width: 100%;
    .device-input-box {
      width: 220px;
      height: 36px;
      background: #ffffff;
      border-radius: 4px;
    }
    .device-btn {
      width: 64px;
      height: 36px;
      background: #3d7fff;
      border-radius: 4px;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
    }
    .xf-btn {
      width: 100px;
      height: 36px;
      background: #3d7fff;
      border-radius: 4px;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      margin-bottom: 18px;
    }
  }
  .table-box {
    width: 100%;
    .el-table--striped
      .el-table__body
      tr.el-table__row--striped
      td.el-table__cell {
      background: #fff;
    }
    .el-table th.el-table__cell.is-leaf,
    .el-table td.el-table__cell {
      border: none !important;
    }
    .el-table td.el-table__cell {
      border: none !important;
    }
    .el-table tr {
      background: #f5f7fa;
    }
    .el-table {
      --el-table-border-color: rgba(222, 253, 255, 0.16);
    }
    .green {
      background-color: #4ac367;
    }
    .gray {
      background-color: #a6aab8;
    }
    .yellow {
      background-color: #f5bb4b;
    }
    .round-box {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      display: inline-block;
      margin-right: 5px;
    }
  }
}
.xf-device-box {
  border-radius: 8px;
  .submit-btn {
    width: 80px;
    height: 36px;
    background: #3d7fff;
    border-radius: 3px;
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
  }
  .cancel-btn {
    width: 52px;
    height: 36px;
    background: #f0f2f5;
    border-radius: 3px;
    border: 1px solid #d7dbe0;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
  }
  .text-box {
    width: 284px;
    height: 120px;
    border-radius: 4px;
  }
  .input-box {
    width: 284px;
    height: 36px;
    border-radius: 4px;
  }
}
</style>
  